<template>
  <div class="home">
    <div class="home-top">
        <span class="title">All works</span>
        <el-tag 
           v-for="item in tagList" 
           :key="item" 
           @click="clearTag(item)"
           size="small"
           effect="dark">
      {{ item }}
    </el-tag>
    </div>
    <div ref="element" class="connent-main">
      <Nelse v-for=" n in date">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-link :href="n.url" target="_blank" type="primary">{{ n.name }}</el-link>
            </div>
          </template>
          <span class="jianjie">{{ n.jianjie }}</span>
          <div class="tag" style="margin-top: 10px;"><el-button v-for="tag in (n.tag ? n.tag.split('-'):[])" @click="changeTag(tag)" type="primary" size="small"
              color="#e0e0e0">{{ tag }}</el-button> </div>
          <div class="teacher" style="margin-top: 10px;"><el-button v-for="teacher in (n.teacher ? n.teacher.split('-'):[])" @click="changeTag(teacher,1)" type="primary"
              size="small" color="#009688">{{ teacher}}</el-button></div>
        </el-card>
      </Nelse>
    </div>
    <el-pagination background layout="prev, pager, next"  :page-size="pageDate.limit" small :total="total" @current-change="handlepage" />
  </div>
</template>

<script setup lang="ts">
import Nelse from '@/components/Nelse.vue';
import { ElMessage } from 'element-plus'
import { onMounted,reactive } from 'vue';
import {getData,getTagDate} from '../api'
let date = reactive([
  {
    name: 'bilibili大学',
    jianjie: '我认为最好的学习网站',
    tag: '棒-yes',
    teacher: '陈毅',
    url: 'https://www.bilibili.com',
  }
])
let total = 1
 const pageDate ={
          page:1,
          limit:24
      }
 function handlepage(val:any) {
    pageDate.page = val
    getList()

 }
 function getList(){
    getData({params: {...pageDate}}).then(({data})=>{
      total = data.counts || 0
      Object.assign(date,data.date) 
    })
 }
  
  function changeTag(item:string,n = 0){
      let a = 0
      tagList.forEach(n => {
        if(n === item)a++
      })
      if(!a && tagList.length <5) {
          if(!n) tsList.push(item)
           else  teacherList.push(item)
           getTagDate({params:{tagList,teacherList}}).then()
          tagList.push(item)
          }
        else {
       if(a) ElMessage({message: "不能选重复标签哦！！！",type: 'warning', })
       else  ElMessage({message: "最多只能选5个哦！！！",type: 'warning', })
   }
  }
  const tagList = reactive([])
  const tsList = []
  const teacherList =[]
  function clearTag(item:string){
      
  }
   onMounted(()=>{
      getList(),console.log('@@@')
   })
</script>

<style scoped>
.title {
  font-size: large
}

.connent-main {
  margin-top: 20px;
  height: 85%;
  display: flex;
  flex-wrap: wrap;

}

.el-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.home {
  display: flex;
  flex-direction: column;
}

.el-link {
  font-size: 20px;
}

.jianjie .tag .teacher {
  font-size: 14px
}
.tag .teacher{
  display: flex;
  flex-wrap: wrap;
}
.el-tag{
  margin-left: 10px;
}
</style>